<!doctype html>
<html>
<head>
    <script src="./canvas-datagrid.debug.js"></script>
    <script src="./styleLibrary.js"></script>
    <script src="./styleBuilder.js"></script>
    <style>
        html, body {
            height: 100%;
            width: 100%;
            min-width: 100%;
            min-height: 100%;
            padding: 0;
            margin: 0;
            overflow-y: hidden;
        }
        .style-maker-title {
            display: block;
            padding: 3px;
        }
        .grid {
            width: 100%;
            height: 100%;
        }
        .style-maker-tr {
            color: darkgray;
            background: #333;
            cursor: pointer;
        }
        .style-maker-tdl {
            padding-left: 3px;
        }
        .style-maker-tdl:hover {
            background: #888;
        }
        .style-maker-tdc {
            outline: solid 1px #CCC;
            cursor: pointer;
        }
        .style-maker-modal {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            background: rgba(0, 0, 0, 0.75);
            text-align: center;
        }
        .style-maker-import-textarea {}
        .style-maker-control {}
        .style-maker-input {}
        .style-maker-label {
            cursor: pointer;
        }
        .style-maker-props {
            overflow-y: auto;
            height: calc(100% - 105px);
        }
        .style-maker, .style-maker-dialog {
            position: absolute;
            top: 4%;
            right: 3%;
            background: #555;
            opacity: 0.98;
            color: black;
            font-family: sans-serif;
            font-size: 0.8em;
            padding: 4px;
            border: outset 2px #777;
            box-shadow: 3px 3px 5px #555;
        }
        .style-maker {
            height: 90%;
        }
        .style-maker-import-textarea {
             height: 200px;
             width: 396px;
        }
        .style-maker button, .style-maker-dialog button {
            margin-left: 4px;
            margin-bottom: 4px;
        }
        .style-maker-dialog {
            width: 450px;
            margin: 30px auto;
            color: darkgray;
            background: #333;
        }
        .style-maker-prop-highlight {
            background: #6ca5ff;
            color: #000000;
        }
        .style-maker-new-color-container {
            display: inline-block;
            margin: 7px;
        }
        .style-maker-new-color-input {
            width: 70px;
        }
        .style-maker-new-color-box {
            width: 75px;
            height: 75px;
            cursor: pointer;
        }
        .style-maker-help-message {
            text-align: left;
            padding: 10px;
        }
        .style-maker-help-message h1, .style-maker-help-message h2 {
            text-align: center;
        }
    </style>
</head>
<body>
</body>
</html>